<!--道具库存-->
<script setup>
import {onMounted, ref, toRefs} from "vue";
import {useStore} from "vuex";
import ItemIcon from "@/components/item/ItemIcon.vue";
import {ItemType} from "@ginstone/nga-api/dist/src/enums/ItemType";
import {ItemUseType} from "@ginstone/nga-api/dist/src/enums/ItemUseType";
import {ElementUtils} from "@/assets/js/ElementUtils";
import {ElMessageBox} from "element-plus";
import {ItemUseParam} from "@ginstone/nga-api/dist/src/params/ItemParams";

const props = defineProps({
  // 库存还是商店
  tab: {
    required: true, type: String,
    validator(value) {
      return ['inventory', 'store'].includes(value)
    }
  },
  //如果传入表示对用户使用道具
  userId: Number,
  //如果传入表示对回复
  topicId: Number,
  //如果传入表示对回复
  replyId: Number,
  // 指定道具类型
  itemType: ItemType,
})
const {userId, topicId, replyId, tab, itemType} = toRefs(props)
const store = useStore();
const page = ref(1);
const totalPage = ref();
const data = ref();
const INVENTORY_TAB = 'inventory';
const STORE_TAB = 'store';

// 道具类型
const type = ref(itemType.value);
const hasNext = ref(true);
const emit = defineEmits(['item-click']);

const applyResult = (res) => {
  console.log(res)
  // 如果指定了道具类型，只显示该类型
  if (itemType.value) {
    data.value = res.data.filter(i => i.type === itemType.value)
  } else {
    data.value = res.data
  }
  hasNext.value = res.hasNext
  totalPage.value = res.page + (res.hasNext ? 1 : 0)
}

// 查询库存
const inventoryList = (page, force) => store.dispatch("Item/inventory", {force, page}).then(res => {
  applyResult(res)
})
// 查询商店
const storeList = (page, type, force) => store.dispatch("Item/store", {force, page, type}).then(res => {
  applyResult(res)
})


const list = (force) => {
  if (tab.value === INVENTORY_TAB) {
    inventoryList(page.value, force)
  }
  if (tab.value === STORE_TAB) {
    storeList(page.value, type.value, force)
  }
}

onMounted(() => list())

//判断是否提供了使用道具所需的参数
const hasParam = (item) => {
  if (item.type === ItemType.TO_REPLY) {
    return topicId.value && replyId.value !== undefined
  }
  if (item.type === ItemType.TO_USER) {
    return userId.value
  }
  return false
}

// 生成使用参数
const buildItemUseParam = (item, useType) => {
  if (item.type === ItemType.TO_REPLY) {
    return ItemUseParam.useToReply(useType, item.id, topicId.value, replyId.value, 0)
  }
  if (item.type === ItemType.TO_USER) {
    return ItemUseParam.useToUser(useType, item.id, userId.value)
  }
  if (item.type === ItemType.MEDAL) {
    // todo
    ElementUtils.notice({message: "使用徽章的方法尚未实现", type: "warning"})
  }
  return undefined;
}

const itemClick = (item) => {
  console.log(item)
  // 在参考顾
  const inInventory = tab.value === INVENTORY_TAB
  // 在商店
  const inStore = tab.value === STORE_TAB

  if (hasParam(item)) {
    // 提供了参数

    //使用类型
    const useType = inInventory ? ItemUseType.USE_INVENTORY : ItemUseType.BUY_AND_USE
    // 生成请求参数
    const param = buildItemUseParam(item, useType)
    // 弹窗标题
    const title = useType === ItemUseType.USE_INVENTORY ? '使用道具' : '购买并使用道具'
    // 弹窗正文
    const content = `${item.typeInfo.name} -> ${item.typeInfo.description}`
    ElementUtils.confirm(content, title).then(() => {
      store.dispatch("Item/use", param)
          .catch(ElementUtils.exceptionHandler)
    }).catch(r => {
      console.warn(r)
    })
  } else {
    //未提供参数
    if (inStore) {
      //在商店，购买要求提供数量
      const content = `${item.typeInfo.description}` + (item.typeInfo.permissionBuyStore ? '  要求:' + item.typeInfo.permissionBuyStore : '')
      ElMessageBox.prompt(content, '购买道具:' + item.typeInfo.name, {
        inputType: 'number',
        inputValue: '1',
      }).then(({value}) => {
        console.log(value)
        //购买道具
        store.dispatch("Item/buy", {id: item.id, count: value})
            .catch(ElementUtils.exceptionHandler)
      }).catch(r => {
        console.log(r)
      })
    }
    if (inInventory) {
      //在库存，无操作
    }
  }
}
</script>

<template>
  <div>
    <div v-if="tab===INVENTORY_TAB">
      <el-button size="small" type="success" @click="list">刷新</el-button>
    </div>
    <!--     当处于商店模式时，显示类型选项-->
    <div v-if="tab === STORE_TAB && !itemType">
      <el-select v-model="type" clearable placeholder="道具类型" @change="page=1;list(false)">
        <el-option :value="ItemType.ACTIVATION_CODE" label="激活码"/>
        <el-option :value="ItemType.MEDAL" label="徽章"/>
        <el-option :value="ItemType.TO_USER" label="对人"/>
        <el-option :value="ItemType.TO_REPLY" label="对帖"/>
      </el-select>
    </div>
    <br>
    <div>
      <template v-for="p in totalPage" v-if="totalPage>1">
        <span v-if="p===page" style="margin-left: 5px">{{ p }}</span>
        <el-link v-else style="margin-left: 5px" @click="page=p;list(false)">{{ p }}</el-link>
      </template>
    </div>
    <br>
    <!--     道具列表-->
    <item-icon v-for="item in data" :data="item" @itemClick="itemClick"/>
  </div>
</template>

<style scoped>

</style>